<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<div th:replace="fragment/js::js"></div>
<style>
    /*修改layui表格的高度*/
    .layui-table-cell {
        height: auto;
    }
</style>
<body>
<h1>[[${goodsId}]]</h1>
<!--分页组件-->
<!--分页组件-->
<table id="roleTable" lay-filter="roleTable"></table>

<script type="text/html" id="addForm">
    <form class="layui-form" style="padding: 20px">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" placeholder="请输入角色名称"
                       style="width: 200px" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序编号</label>
            <div class="layui-input-block">
                <input type="text" name="sort" placeholder="请输入排序编号" lay-verify="number"
                       style="width: 200px" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色图标</label>
            <div class="layui-input-block">
                <input type="text" name="icon" placeholder="请输入角色图标"
                       style="width: 200px" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色标记</label>
            <div class="layui-input-block">
                <input type="text" name="flag" placeholder="请输入角色标记"
                       style="width: 200px" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色备注</label>
            <div class="layui-input-block">
                <input type="text" name="flag" placeholder="请输入角色备注"
                       style="width: 200px" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">系统级别</label>
            <div class="layui-input-block">
                <input type="checkbox" name="system" lay-skin="switch">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="commit">立即提交</button>
            </div>
        </div>
    </form>
</script>


<script type="text/html" id="showPermissionTable">
    <table id="permissionTable" class="layui-table">
        <thead>
        <tr>
            <th>权限ID</th>
            <th>权限名称</th>
            <th>图标</th>
            <th>排序</th>
            <th>标记flag</th>
            <th>备注</th>
            <th>是否展示</th>
            <th>url</th>
        </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
</script>

<script th:inline="javascript" type="text/javascript">
    function deleteRoles(checkRoles, layer, tb){     // ctrl+alt+m 提取代码
        let arr=[]
        checkRoles.forEach((r)=>{
            console.log(r)
            let roleItems={};
            roleItems.roleId = r.roleId;
            // 只传递对象的id，节省很多宽带
            arr.push(roleItems);
        });
        if (arr.length > 0) {   // 有值时才请求
            $.ajax({
                url: "/pages/back/role/deleteRoles",// 请求数据服务器地址，只能是当前项目，JSONP才能访问外网（需要服务器配合才能用）
                contentType: "application/json",// 默认就是表单数据(不写)，如果此时要传递的是json字符串，
                // 那么此时就用application/json,如果此时要传递图片"multipart/form-data，还有数组，集合，还有对象，那么contentType必须指定为false
                data: JSON.stringify(arr),// 要上传的参数
                dataType: 'json',// 服务器响应数据：json,text,html,xml
                error: function () {//请求错误的时候，会触发此函数
                    layer.msg("删除失败")
                },
                processData: true,//布尔值,一般都不用设置，规定通过请求发送的数据是否转换为查询字符串。默认是 true。如果此时上传的时候，有图片，这里必须设置false,
                success: function (data) {// 请求成功，回调函数,data，指的就是服务器返回的数据
                    layer.msg(data.msg)
                    tb.reload();
                },
                type: 'post',// ajax请求的方式，post或get
            })
        }
    }

    layui.use(['layer', 'table', 'form'], function () {

        // 我再js代码里边如何获取控制器传递过来的参数呢？
        let layer = layui.layer;// 弹出层
        let goodsId = [[${goodsId}]];// 这么取获取,thymeleaf内联表达式

        let table = layui.table;// 分页组件
        let form = layui.form;// 分页组件
        let $ = layui.$;// 使用jquery

        // layer.msg('弹出一个消息', {icon: 1});

        //第一个实例
        let tb = table.render({// 渲染表格
            elem: '#roleTable'
            , url: '/pages/back/role/ajaxList' //服务后台的数据接口
            , page: true //开启分页
            , cols: [[ //表头，这里是两个[[开头，两个]]结尾
                {field: '', type: 'checkbox', title: '多选'}
                , {field: 'name', title: '角色名称', width: 160, edit: 'text'}
                , {field: 'sort', title: '序号', width: 80, edit: 'text', sort: true}
                , {field: 'icon', title: '图标', width: 200, edit: 'text'}
                , {field: 'flag', title: '标记', width: 160, edit: 'text'}
                , {field: 'note', title: '备注', width: 160, edit: 'text'}
                , {field: 'system', title: '系统级别', width: 160,
                        templet: function (d) {// 这个d指的是本行的数据 js对象
                            let check=d.system?'checked':'';
                            return '<div > <input lay-filter="isSystem" id="pid-' + d.roleId + '" type="checkbox" ' + check + ' ' +
                                'value="1" lay-text="true|false" name="system" lay-skin="switch"></div>'
                    }}
                , {
                    field: '', title: '操作', templet: function (d) {// 这个d指的是本行的数据 js对象
                        // console.log(d)
                        return '<div>\n' +
                            '            <button class="layui-btn layui-btn-xs " lay-event="showPermissions">查看权限</button>\n' +
                            '            <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteData">删除</button>\n' +
                            ' </div>'
                    }
                }
            ]]
            , toolbar: 'default'
        });
        let addOpen;
        let editOpen;
        // 系统开关按钮
        form.on('switch(isSystem)',function (d) {
            // 拿按钮id
            let rid = d.elem.id.split("-")[1]
            let role = {}
            role.roleId = rid
            role.system = d.elem.checked
            $.post('/pages/back/role/chsys',role,function (res) {
                layer.msg(res.msg)
            })
        })

        // 添加角色
        form.on('submit(commit)', function (data) {
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            // 现在要讲的是如果表单中有 文件上传呢？而且还有基本数据
            // formData就是传递表单js对象,处理最复杂的表单

            // 如何自定义增加表单数据

            let formData = new FormData(data.form);
            // 添加一个文件呢？
            // 添加文件的步骤：首先，第一步：获取file的jsDom对象
            console.log(formData)

            $.ajax({
                url: "/pages/back/role/add",// 请求数据服务器地址，只能是当前项目，JSONP才能访问外网（需要服务器配合才能用）
                contentType: false,// 默认就是表单数据(不写)，如果此时要传递的是json字符串，
                // 那么此时就用application/json,如果此时要传递图片"multipart/form-data，还有数组，集合，还有对象，那么contentType必须指定为false
                data: formData,// 要上传的参数
                dataType: 'json',// 服务器响应数据：json,text,html,xml
                error: function () {//请求错误的时候，会触发此函数

                },
                processData: false,//布尔值,一般都不用设置，规定通过请求发送的数据是否转换为查询字符串。默认是 true。如果此时上传的时候，有图片，这里必须设置false,
                success: function (res) {// 请求成功，回调函数,data，指的就是服务器返回的数据
                    if (res.res) {
                        layer.msg(res.msg);
                        tb.reload();// 添加成功数据之后要重载表格
                        if (addOpen != undefined) {
                            layer.close(addOpen);
                        }
                    }
                },
                type: 'post',// ajax请求的方式，post或get
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        form.on('submit(sureEdit)', function (data) {
            let formData = new FormData(data.form);
            formData.append("goodsId", $("#sureEdit")[0].goodsId);
            // 添加一个文件呢？
            // 添加文件的步骤：首先，第一步：获取file的jsDom对象
            $.ajax({
                url: "/pages/back/goods/edit",// 请求数据服务器地址，只能是当前项目，JSONP才能访问外网（需要服务器配合才能用）
                contentType: false,// 默认就是表单数据(不写)，如果此时要传递的是json字符串，
                // 那么此时就用application/json,如果此时要传递图片"multipart/form-data，还有数组，集合，还有对象，那么contentType必须指定为false
                data: formData,// 要上传的参数
                dataType: 'json',// 服务器响应数据：json,text,html,xml
                error: function () {//请求错误的时候，会触发此函数
                    table.reload
                },
                processData: false,//布尔值,一般都不用设置，规定通过请求发送的数据是否转换为查询字符串。默认是 true。如果此时上传的时候，有图片，这里必须设置false,
                success: function (res) {// 请求成功，回调函数,data，指的就是服务器返回的数据
                    if (res.res) {
                        layer.msg(res.msg);
                        tb.reload();// 添加成功数据之后要重载表格
                        if (editOpen != undefined) {
                            layer.close(editOpen);
                        }
                    }
                },
                type: 'post',// ajax请求的方式，post或get
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        //监听工具条
        //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        table.on('tool(roleTable)', function (obj) {
            var d = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            switch (layEvent) {
                case 'showPermissions':
                    editOpen = layer.open({// 弹框之后，如遇到select标签，radio,checkbox之类，需要使用表单渲染
                        type: 1,
                        title: "查看权限",
                        area: '80%',
                        offset: '30px',
                        shadeClose: true, // 点击遮罩外部关闭
                        content: $("#showPermissionTable").html()
                    });
                    let permissions = d.permissionVOS;
                    let tbody = $("#tbody")
                    permissions.forEach((p) => { // 拼接权限弹出列表
                        let tr = $("<tr>"
                            + "<th>"+p.permissionId+"</th>"
                            + "<th>"+p.name+"</th>"
                            + "<th>"+p.icon+"</th>"
                            + "<th>"+p.sort+"</th>"
                            + "<th>"+p.flag+"</th>"
                            + "<th>"+p.note+"</th>"
                            + "<th>"+p.show+"</th>"
                            + "<th>"+p.url+"</th>"
                            + "</tr>" )
                        //
                        tbody.append(tr)
                    })
                    break;
                case 'deleteData':
                    layer.msg('删除');
                    break;
            }
        });

        //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
        table.on('edit(roleTable)', function (obj) {
            var role = obj.data
            var fieldName = obj.field
            var v = obj.value

            var roleVO = {}
            roleVO[fieldName] = v
            roleVO["roleId"] = role.roleId
            console.log(roleVO)

            $.ajax({
                    url: "/pages/back/role/roleChag",// 请求数据服务器地址，只能是当前项目，JSONP才能访问外网（需要服务器配合才能用）
                    // 那么此时就用application/json,如果此时要传递图片"multipart/form-data，还有数组，集合，还有对象，那么contentType必须指定为false
                    data: roleVO,// 要上传的参数
                    dataType: 'json',// 服务器响应数据：json,text,html,xml
                    error: function () {//请求错误的时候，会触发此函数
                        layer.msg("更新失败，请重试")
                    },
                    success: function (data) {// 请求成功，回调函数,data，指的就是服务器返回的数据
                        console.log(data)
                        layer.msg("更新成功")
                    },
                    type: 'post',// ajax请求的方式，post或get

            });
            tb.reload()

        });

        //
        // // 监听行单击事件
        // table.on('row(roleTable)', function (obj) {
        //     console.log(obj.tr) //得到当前行元素对象
        //     let trDom = obj.tr[0];// jsDom对象
        //     console.log(trDom.arr)
        //     layer.msg('单击事件')
        //     //obj.del(); //删除当前行
        //     //obj.update(fields) //修改当前行数据
        // });

        // 工具栏监听事件监听事件
        table.on('toolbar(roleTable)', function (obj) {
            console.log(obj);
            // var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    addOpen = layer.open({// 弹框之后，如遇到select标签，radio,checkbox之类，需要使用表单渲染
                        type: 1,
                        title: "商品添加",
                        content: $("#addForm").html()
                    });
                    form.render();
                    break;

                case 'delete':
                    let checkStatus = table.checkStatus('roleTable')
                    layer.confirm('您确定删除吗？',function (index) {
                        // 获取选中行的数据
                        let checkRoles = checkStatus.data;
                        deleteRoles(checkRoles,layer,tb) // 批量删除
                        layer.close(index)
                    })
                    break;

                case 'update':
                    layer.msg('编辑');
                    break;
            }
            ;
        });

        table.on('checkbox(roleTable)', function (obj) {
            console.log(obj); //当前是否选中状态
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });


        // tb.reload({
        //     where: {title: "商品"}
        // });// 表格重新加载


        //
        // let open = layer.open({// 就回返回一个index对象
        //     type: 1
        //     , title: "这个是一个信息框"
        //     , content: $("#div").html()
        //     , shadeClose: true // 这个是点击遮罩层是否关闭弹框
        // })

        // layer.confirm('您确定删除吗?', {icon: 3, title: '确定吗？'}, function (index) {
        //     //do something
        //     alert('执行ajax请求去删除数据');
        //
        //     layer.close(index);// 关闭某个弹框，传入弹框的下标
        // });

    });

</script>

<style>
    .testCls {
        color: red;
    }
</style>
</body>

</html>
